<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	/*定时器*/
#colok{
	width:250px;
	height:60px;
	border-radius:30px;
	line-height:57px;
	font-weight:bold;
	background:grey;
	color:purple;
	font-size:35px;
	text-align:center;
	position:absolute;
	left:500px;
	top:300px;
}
#bid{
	position:absolute;
	left:500px;
	top:390px;
	background:#C6DBF0;
	font-size:20px;
	font-weight:bold;
	width:70px;
	height:50px;
}
#bid1{
	position:absolute;
	left:580px;
	top:390px;
	background:#C6DBF0;
	font-size:20px;
	font-weight:bold;
	width:70px;
	height:50px;
}
</style>
<body>
<div><span id='colok'>10:00:20</span></div>
<button id='bid1'>停止</button>
<button id='bid'>开始</button>
</body>
<script type="text/javascript">
	//定义一个函数得到时间
	function getDate(){
		sid=new Date();
		hour=sid.getHours();
		if(hour<10){
			hour='0'+hour;
		}
		minute=sid.getMinutes();
		if(minute<10){
			minute='0'+minute;
		}
		second=sid.getSeconds();
		if(second<10){
			second='0'+second;
		}
		//当时、分、秒是个位数时，前面加一个0，格式标准
		str=hour+':'+minute+':'+second;
		
	bidobj=document.getElementById('colok');
	bidobj.innerHTML=str;
	//秒表内容为时间
	}
kk=setInterval(getDate,1000);//为秒表命名，为下文停止秒表做铺垫
getDate();
start();
//先执行一次，以防刷新时第一次内容为空白或者为span标签里的设定内容
function start(){
	kk=setInterval(getDate,1000);
}
//秒表开始函数
function stop(){
	clearInterval(kk);
}
//秒表停止函数
sobj=document.getElementById('bid');
dobj=document.getElementById('bid1');
sobj.onclick=function(){
	start();
}
dobj.onclick=function(){
	stop();
}
//按按钮就相当于调用函数
</script>
</html>